<template>
  <div>

    <Card>
      <el-row style="margin-bottom: 10px">
        <el-button size="small" type="primary" @click="addOrder">新增</el-button>
        <el-button size="small" type="success">修改</el-button>
        <el-button size="small" type="warning">删除</el-button>
      </el-row>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"
              @on-delete="handleDelete"/>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
      <el-pagination style="float: right; margin-top:10px" :page-size="10"
        background
        layout="prev, pager, next"
        :total="13">
      </el-pagination>
    </Card>
    <Modal v-model="modalVisible" :title="'新增工单'" @on-ok="ok" @on-cancel="cancel">
      <div style="margin-bottom: 10px;"><el-input placeholder="请输入编号" v-model="newAddOrder.id"><template slot="prepend">工单编号</template></el-input></div>
      <div style="margin-bottom: 10px;"><el-input placeholder="请输入内容" v-model="newAddOrder.clubName"><template slot="prepend">俱乐部名称</template></el-input></div>
      <div style="margin-bottom: 10px;"><el-input placeholder="请输入内容" v-model="newAddOrder.applicantName"><template slot="prepend">申请人</template></el-input></div>
      <div style="margin-bottom: 10px;"><el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="newAddOrder.applyDate"><template slot="prepend">日期</template></el-input></div>
      <div style="margin-bottom: 10px;"><el-input placeholder="请输入内容" v-model="newAddOrder.reason"><template slot="prepend">申请事由</template></el-input></div>
      <div style="margin-bottom: 10px;"><el-input placeholder="个人垫付" v-model="newAddOrder.payMode"><template slot="prepend">支付方式</template></el-input></div>
      <div style="margin-bottom: 10px;"><el-input placeholder="请输入金额" v-model="newAddOrder.applyAmount"><template slot="prepend">申请金额（元）</template></el-input></div>
      <div style="margin-bottom: 10px;"><el-input placeholder="请输入金额" v-model="newAddOrder.remainCost"><template slot="prepend">剩余金额（元）</template></el-input></div>
      <div style="margin-bottom: 10px;"><el-input placeholder="已提交" v-model="newAddOrder.state"><template slot="prepend">审批状态</template></el-input></div>
      <div>
        <Upload action="//jsonplaceholder.typicode.com/posts/">
          <Button icon="ios-cloud-upload-outline">上传单据</Button>
        </Upload>
      </div>
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'

export default {
  name: 'order_page',
  components: {
    Tables
  },
  data () {
    return {
      newAddOrder: {},
      contentObj: {},
      modalVisible: false,
      columns: [
        { title: '工单编号', key: 'id', sortable: true },
        { title: '俱乐部名称', key: 'clubName' },
        { title: '申请人', key: 'applicantName', editable: true },
        { title: '日期', key: 'applyDate' },
        { title: '申请事由', key: 'reason' },
        { title: '支付方式', key: 'payMode' },
        { title: '申请金额（元）', key: 'applyAmount' },
        { title: '剩余金额（元）', key: 'remainCost' },
        { title: '审批状态', key: 'state' }
      ],
      tableData: [
        {
          'id': '100001',
          'clubId': '101',
          'clubName': '深圳羽毛球俱乐部',
          'applicantId': 'YC01148',
          'applicantName': '陈先生',
          'applyDate': '2021-03-26',
          'applyAmount': 1000.00,
          'reason': '周五羽毛球训练',
          'payMode': '个人垫付',
          'currentYear': 2021,
          'totalCost': 50000.00,
          'usedCost': 20000.00,
          'remainCost': 30000.00,
          'state': '审批通过',
          'createDate': '2021-03-26',
          'updateDate': '2021-03-26'
        },
        {
          'id': '100002',
          'clubId': '102',
          'clubName': '深圳篮球俱乐部',
          'applicantId': 'YC01149',
          'applicantName': '李先生',
          'applyDate': '2021-03-26',
          'applyAmount': 2000.00,
          'reason': '周三篮球训练',
          'payMode': '个人垫付',
          'currentYear': 2021,
          'totalCost': 192800.00,
          'usedCost': 2800.00,
          'remainCost': 190000.00,
          'state': '审批通过',
          'createDate': '2021-03-26',
          'updateDate': '2021-03-26'
        },
        {
          'id': '100003',
          'clubId': '101',
          'clubName': '深圳羽毛球俱乐部',
          'applicantId': 'YC01148',
          'applicantName': '陈先生',
          'applyDate': '2021-03-27',
          'applyAmount': 3000.00,
          'reason': '羽毛球锦标赛',
          'payMode': '个人垫付',
          'currentYear': 2021,
          'totalCost': 50000.00,
          'usedCost': 21000.00,
          'remainCost': 29000.00,
          'state': '审批通过',
          'createDate': '2021-03-26',
          'updateDate': null
        },
        {
          'id': '100004',
          'clubId': '101',
          'clubName': '深圳羽毛球俱乐部',
          'applicantId': 'YC01148',
          'applicantName': '陈先生',
          'applyDate': '2021-03-27',
          'applyAmount': 5000.00,
          'reason': '羽毛球锦标赛小组赛',
          'payMode': '个人垫付',
          'currentYear': 2021,
          'totalCost': 50000.00,
          'usedCost': 24000.00,
          'remainCost': 26000.00,
          'state': '审批中',
          'createDate': '2021-03-27',
          'updateDate': null
        },
        {
          'id': '100005',
          'clubId': '101',
          'clubName': '深圳羽毛球俱乐部',
          'applicantId': 'YC01148',
          'applicantName': '陈先生',
          'applyDate': '2021-03-26',
          'applyAmount': 1000.00,
          'reason': '周五羽毛球训练',
          'payMode': '个人垫付',
          'currentYear': 2021,
          'totalCost': 50000.00,
          'usedCost': 20000.00,
          'remainCost': 30000.00,
          'state': '审批通过',
          'createDate': '2021-03-26',
          'updateDate': '2021-03-26'
        },
        {
          'id': '100006',
          'clubId': '101',
          'clubName': '深圳羽毛球俱乐部',
          'applicantId': 'YC01148',
          'applicantName': '陈先生',
          'applyDate': '2021-03-26',
          'applyAmount': 1000.00,
          'reason': '周五羽毛球训练',
          'payMode': '个人垫付',
          'currentYear': 2021,
          'totalCost': 50000.00,
          'usedCost': 20000.00,
          'remainCost': 30000.00,
          'state': '审批通过',
          'createDate': '2021-03-26',
          'updateDate': '2021-03-26'
        },
        {
          'id': '100007',
          'clubId': '101',
          'clubName': '深圳羽毛球俱乐部',
          'applicantId': 'YC01148',
          'applicantName': '陈先生',
          'applyDate': '2021-03-26',
          'applyAmount': 1000.00,
          'reason': '周五羽毛球训练',
          'payMode': '个人垫付',
          'currentYear': 2021,
          'totalCost': 50000.00,
          'usedCost': 20000.00,
          'remainCost': 30000.00,
          'state': '审批通过',
          'createDate': '2021-03-26',
          'updateDate': '2021-03-26'
        },
        {
          'id': '100008',
          'clubId': '101',
          'clubName': '深圳羽毛球俱乐部',
          'applicantId': 'YC01148',
          'applicantName': '陈先生',
          'applyDate': '2021-03-26',
          'applyAmount': 1000.00,
          'reason': '周五羽毛球训练',
          'payMode': '个人垫付',
          'currentYear': 2021,
          'totalCost': 50000.00,
          'usedCost': 20000.00,
          'remainCost': 30000.00,
          'state': '审批通过',
          'createDate': '2021-03-26',
          'updateDate': '2021-03-26'
        },
        {
          'id': '100009',
          'clubId': '101',
          'clubName': '深圳羽毛球俱乐部',
          'applicantId': 'YC01148',
          'applicantName': '陈先生',
          'applyDate': '2021-03-26',
          'applyAmount': 1000.00,
          'reason': '周五羽毛球训练',
          'payMode': '个人垫付',
          'currentYear': 2021,
          'totalCost': 50000.00,
          'usedCost': 20000.00,
          'remainCost': 30000.00,
          'state': '审批通过',
          'createDate': '2021-03-26',
          'updateDate': '2021-03-26'
        },
        {
          'id': '100010',
          'clubId': '101',
          'clubName': '深圳羽毛球俱乐部',
          'applicantId': 'YC01148',
          'applicantName': '陈先生',
          'applyDate': '2021-03-26',
          'applyAmount': 1000.00,
          'reason': '周五羽毛球训练',
          'payMode': '个人垫付',
          'currentYear': 2021,
          'totalCost': 50000.00,
          'usedCost': 20000.00,
          'remainCost': 30000.00,
          'state': '审批通过',
          'createDate': '2021-03-26',
          'updateDate': '2021-03-26'
        }
      ]
    }
  },
  computed: {
    content () {
      return this.contentObj
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
    addOrder () {
      this.modalVisible = true
    },
    ok () {
      console.log(this.newAddOrder)
      this.tableData.push(this.newAddOrder)
    },
    cancel () {

    }
  },
  mounted () {
    // getTableData().then(res => {
    //   this.tableData = res.data
    // })
  }
}
</script>

<style>

</style>
